import React from 'react';
import styled from 'styled-components';

const ButtonContainer = styled.div`
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
`;

const ActionButton = styled.button`
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #07c160;
  color: white;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s;

  &:hover {
    background-color: #06ae56;
  }

  &:active {
    background-color: #059b4c;
  }

  &:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
`;

interface ActionButtonsProps {
  onCopyToWeixin: () => void;
}

export const ActionButtons: React.FC<ActionButtonsProps> = ({ onCopyToWeixin }) => {
  return (
    <ButtonContainer>
      <ActionButton onClick={onCopyToWeixin}>
        复制到微信公众号
      </ActionButton>
    </ButtonContainer>
  );
};
